import { useEffect } from "react";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import "./CesiumCom.css"

Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MzFiNGJmOS1jYzBmLTQyYjYtOTNhOS0wMThjZWE3YzM0MGMiLCJpZCI6MjU5MTEyLCJpYXQiOjE3MzI5NzM5MzB9.RUpB02gjxFwpqmbND4OKWyR7-VntYuohtjlXklFB6UE";
window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）
// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5, // 西边经度
  20.4, // 南边维度
  110.4, // 东边经度
  61.2
); // 北边维度

function CesiumCom() {
  useEffect(() => {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      geocoder: false, //设置搜索框是否可见
      homeButton: false, // 返回初始位置键是否可见
      sceneModePicker: false, // 查看器选择模式选择键是否可见
      baseLayerPicker: false, // 图层选择键是否可见
      navigationHelpButton: false, // 帮助按钮是否可见
      animation: false, // 播放控制按钮是否可见
      timeline: false, // 时间轴是否可见
      fullscreenButton: false, // 全屏按钮是否可见
    });
    viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
  }, []);

  return <div id="cesiumContainer"></div>;
}

export default CesiumCom;
